Highcharts চার্টে Zoom এবং Panning ফিচার যুক্ত করা খুবই সহজ। এই ফিচারগুলি ব্যবহারকারীদের চার্টের ডেটার সাথে আরও ইন্টারঅ্যাকটিভভাবে কাজ করতে সহায়ক। Zoom এর মাধ্যমে ব্যবহারকারীরা নির্দিষ্ট একটি অংশে জুম ইন করতে পারেন, এবং Panning এর মাধ্যমে তারা চার্টের অন্য অংশে নেভিগেট করতে পারেন।

Highcharts এ Zoom এবং Panning ফিচার সাধারণত chart.zoomType এবং xAxis/pAxis কনফিগারেশন দিয়ে কাস্টমাইজ করা হয়।

1. Zoom ফিচার যুক্ত করা

Zoom ফিচারটি দিয়ে ব্যবহারকারীরা চার্টের নির্দিষ্ট অংশে জুম ইন করতে পারেন। Highcharts এ Zoom কার্যকর করার জন্য chart.zoomType প্রপার্টি ব্যবহার করা হয়, যা x, y অথবা দুইটি একসাথে জুম ইন করার জন্য কনফিগার করা যায়।

Zoom ফিচার যুক্ত করার উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line', // চার্টের প্রকার (লাইন)
    zoomType: 'xy' // x এবং y উভয় দিকেই জুম
  },
  title: {
    text: 'Zoom এবং Panning উদাহরণ'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50, 60, 70]
  }],
  tooltip: {
    shared: true, // টুলটিপের জন্য শেয়ারড ডেটা
    valueSuffix: ' units' // প্রতিটি মানের পর suffix যোগ
  }
});

এখানে, zoomType: 'xy' ব্যবহার করে আমরা x এবং y উভয় অক্ষের উপর জুম ফিচার সক্ষম করেছি। আপনি যদি শুধুমাত্র x অক্ষের জন্য জুম চান, তাহলে zoomType: 'x' ব্যবহার করতে পারেন।

2. Panning ফিচার যুক্ত করা

Panning ফিচারটি ব্যবহারকারীদের চার্টের অংশগুলো স্ক্রল বা নেভিগেট করতে সাহায্য করে, অর্থাৎ তারা চার্টের ডেটার উপর থেকে প্যান করতে পারেন। Highcharts এ Panning সক্ষম করতে chart.panning প্রপার্টি ব্যবহার করা হয়।

Panning ফিচার যুক্ত করার উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line', // চার্টের প্রকার (লাইন)
    panning: true, // Panning সক্ষম করা
    panKey: 'shift' // shift কী ব্যবহার করে প্যানিং করা যাবে
  },
  title: {
    text: 'Panning এবং Zoom উদাহরণ'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50, 60, 70]
  }],
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  }
});

এখানে, panning: true দিয়ে প্যানিং সক্ষম করা হয়েছে, এবং panKey: 'shift' দিয়ে ব্যবহাকারী shift কী প্রেস করলে প্যানিং করতে পারবেন। আপনি চাইলে panKey কে 'ctrl' বা 'alt' হিসেবে কনফিগার করতে পারেন, যা ব্যবহারকারীকে প্যান করার জন্য নির্দিষ্ট কী প্রেস করতে সাহায্য করবে।

3. Zoom এবং Panning একত্রে ব্যবহার

Zoom এবং Panning একসাথে ব্যবহার করে একটি আরও উন্নত ইন্টারঅ্যাকটিভ চার্ট তৈরি করা যায়। এখানে, আপনি Zoom এবং Panning উভয় ফিচার একসাথে কনফিগার করতে পারবেন।

Zoom এবং Panning একত্রে ব্যবহার করার উদাহরণ:

Highcharts.chart('container', {
  chart: {
    type: 'line',
    zoomType: 'xy', // x এবং y উভয় দিকেই জুম
    panning: true,  // Panning সক্ষম
    panKey: 'shift' // shift কী দিয়ে প্যানিং
  },
  title: {
    text: 'Zoom এবং Panning একত্রে'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  yAxis: {
    title: {
      text: 'Amount'
    }
  },
  series: [{
    name: '2024 সেলস',
    data: [10, 20, 30, 40, 50, 60, 70]
  }],
  tooltip: {
    shared: true,
    valueSuffix: ' units'
  }
});

এখানে, zoomType: 'xy' দিয়ে জুম সক্ষম করা হয়েছে এবং panning: true দিয়ে প্যানিং ফিচার যোগ করা হয়েছে। ফলে ব্যবহারকারী উভয় জুম এবং প্যানিং ফিচার ব্যবহার করতে পারবেন।

সারাংশ

Highcharts এ Zoom এবং Panning ফিচার যোগ করা খুবই সহজ এবং ইন্টারঅ্যাকটিভ চার্ট তৈরির জন্য কার্যকর। আপনি zoomType এবং panning প্রপার্টি ব্যবহার করে এই ফিচারগুলো কনফিগার করতে পারেন। Zoom ফিচারটি ডেটার নির্দিষ্ট অংশে জুম ইন করতে সাহায্য করে এবং Panning ফিচারটি ব্যবহারকারীকে চার্টের অংশগুলো স্ক্রল করতে সহায়ক। এই ফিচারগুলো একত্রে ব্যবহার করলে একটি পূর্ণাঙ্গ ইন্টারঅ্যাকটিভ চার্ট তৈরি করা যায়।